// Class Variables

// Material design Color
$grey-100: #F5F5F5;
$grey-200: #EEEEEE;
$grey-300: #E0E0E0;
$grey-400: #BDBDBD;
$grey-500: #9E9E9E;
$grey-600: #757575;
$grey-700: #616161;
$grey-800: #424242;
$grey-900: #212121;

// Class Particular
$light-blue: #03A9F4;
$lime:       #CDDC39;
$amber:      #FFC107;
$brown:      #795548;
$blue-grey:  #607D8B;
$grey:       #9E9E9E;
$md-colors: (
  "red":       $red,
  "pink":      $pink,
  "purple":    $purple,
  "indigo":    $indigo,
  "cyan":      $cyan,
  "teal":      $teal,
  "green":     $green,
  "lime":      $lime,
  "yellow":    $yellow,
  "amber":     $amber,
  "orange":    $orange,
  "brown":     $brown,
  "blue-grey":  $blue-grey,
  "grey":      $grey,
  "blue":      $blue,
  "light-blue": $light-blue,
);

$red-100:      #FFCDD2;
$pink-100:     #F8BBD0;
$purple-100:   #E1BEE7;
$indigo-100:   #C5CAE9;
$cyan-100:     #B2EBF2;
$teal-100:     #B2DFDB;
$green-100:    #C8E6C9;
$lime-100:     #F0F4C3;
$yellow-100:   #FFF9C4;
$amber-100:    #FFECB3;
$orange-100:   #FFE0B2;
$brown-100:    #D7CCC8;
$blue-grey-100: #CFD8DC;
$grey-100:     #F5F5F5;
$blue-100:     #BBDEFB;
$light-blue-100:#B3E5FC;
$md-colors-100: (
  "red-100":       $red-100,
  "pink-100":      $pink-100,
  "purple-100":    $purple-100,
  "indigo-100":    $indigo-100,
  "cyan-100":      $cyan-100,
  "teal-100":      $teal-100,
  "green-100":     $green-100,
  "lime-100":      $lime-100,
  "yellow-100":    $yellow-100,
  "amber-100":     $amber-100,
  "orange-100":    $orange-100,
  "brown-100":     $brown-100,
  "blue-grey-100":  $blue-grey-100,
  "grey-100":      $grey-100,
  "blue-100":      $blue-100,
  "light-blue-100": $light-blue-100
);
// Material design Color

// Custom color
$home-bg:           $grey-100;
$home-bg-secondary: $grey-200;
$home-sidebar:      $grey-200;
$icon-color: rgba($black, .5) !default;
$header-footer-color: rgba($black, .5) !default;

// Reset
$a-transition: all 420ms cubic-bezier(0.165, 0.84, 0.44, 1);

// Component
$border-radius: .25rem !default;
$transition-base: all .2s ease-in-out !default;

// Fonts
$font-size-base: 1rem;
$font-size-xs: ($font-size-base * .75) !default;

// Forms
$input-box-shadow: none;
$input-focus-box-shadow: 0 .313rem .719rem rgba(theme-color("primary"),.1), 0 .156rem .125rem rgba($black, .06) !default;

// Modal
$modal-transition: transform .2s ease-out !default;

// Tooltip
$tooltip-bg: rgba($black, .9);

// popover
$popover-border-width: 1px;
$popover-border-color: $home-bg;
$popover-box-shadow: 4px 8px 16px 0 rgba(66, 66, 66, .06);

// Card
$card-border-radius: .25rem;
$card-border-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;

// Drawer
$drawer-bg-color: rgba(0, 0, 0, 0.5);
$drawer-content-bg-color: white;
$drawer-content-width: 250px;

// Dropdown
$dropdown-min-width: 8rem;
$dropdown-box-shadow: 2px 4px 8px 0 rgba(66, 66, 66, 0.12);
$dropdown-custom-border-color: $home-bg;

// Breadcrumb
$breadcrumb-bg: $home-bg-secondary;

// Datepicker
$datepicker-border-radius: $card-border-radius !default;
$datepicker-dropdown-padding: 20px 22px !default;

$datepicker-cell-transition: $transition-base !default;
$datepicker-cell-hover-background: lighten($blue-grey, 55%) !default;
$datepicker-cell-border-radius: 50% !default;
$datepicker-cell-width: 36px !default;
$datepicker-cell-height: 36px !default;

$datepicker-disabled-cell-color: lighten($blue-grey, 53%) !default;
$datepicker-disabled-old-new-color: lighten($blue-grey, 40%) !default;

$datepicker-header-cell-border-radius: $border-radius !default;

$datepicker-active-color: $white !default;
$datepicker-active-background: $primary !default;

$datepicker-range-background: $primary !default;
$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%) !default;
$datepicker-range-color: $white !default;
$datepicker-range-highlighted-bg: $gray-200 !default;

$datepicker-dropdown-border: lighten($blue-grey, 40%) !default;
$datepicker-dropdown-bg: $white !default;
$datepicker-highlighted-bg: $datepicker-active-background !default;